<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import * as Cesium from 'cesium'



onMounted(async () => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    sceneMode: Cesium.SceneMode.SCENE2D,
    animation: false,
    baseLayerPicker: false,
    fullscreenButton: false,
    vrButton: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    selectionIndicator: false,
    timeline: false,
    navigationHelpButton: false,
    baseLayer: Cesium.ImageryLayer.fromProviderAsync(
      Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE)
    )
  })
  viewer.cesiumWidget.creditContainer.style.display = "none"

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(102.81, 37.18, 300000),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0.0
    }
  })

  async function loadGeoJson(url) {
    try {
      const dataSource = await Cesium.GeoJsonDataSource.load(url);
      viewer.dataSources.add(dataSource);
      // 可选：缩放到数据范围
      viewer.zoomTo(dataSource);
    } catch (error) {
      console.error('Error loading GeoJSON:', error);
    }
  }

  // 使用示例
  loadGeoJson('/GeoJSON/天祝藏族自治县.json');
})

onUnmounted(() => {
  viewer.destroy()
})
</script>

<template>
  <el-col :span="10">
    <el-row style="height: 80%; position: relative;" id="cesiumContainer">
    </el-row>
    <el-row style="height: 20%;background-color: #000;border: 1px solid #fff;">
    </el-row>
  </el-col>
</template>

<style></style>